﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>发布文章</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <link rel="shortcut icon" th:href="@{/admin/images/favicon.png}"/>
    <link th:href="@{/plugins/zui/1.10.0/css/zui.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/plugins/jquery-ui/jquery-ui.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/plugins/jquery-tagsinput/jquery-tagsinput.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/plugins/zui/1.10.0/lib/picker/zui.picker.min.css}" rel="stylesheet">
    <link th:href="@{/plugins/font-awesome/font-awesome.min.css}" rel="stylesheet">
    <link th:href="@{/index/css/style.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/plugins/md/css/style.css}" rel="stylesheet"/>
    <link th:href="@{/plugins/uploader/uploadImg.css}" rel="stylesheet"/>

    <script type="text/javascript" charset="utf-8" src="/plugins/ueditor-plus/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/plugins/ueditor-plus/editor_api.js"></script>
    <script type="text/javascript" charset="utf-8" src="/plugins/ueditor-plus/lang/zh-cn/zh-cn.js"></script>
    <link rel="stylesheet" href="/plugins/ueditor-plus/style.css"/>

    <style>
        #tags_addTag input {
            width: 100%;
        }

        .picker-selections {
            min-height: 42px !important;
        }

        .form-control {
            display: inline-block !important;
        }
    </style>
</head>
<body class="fixed-left">
<div id="wrapper" style="height: 90%">
    <div class="content-page">
        <div class="content">
            <div class="container">
                <div class="row">
                    <div class="col-sm-12">
                        <h4 class="page-title">
                            发布文章
                        </h4>
                    </div>
                    <div class="col-md-12">
                        <form id="articleForm" role="form" novalidate="novalidate">
                            <div class="form-group col-md-12" style="padding: 0;">
                                <input type="text" class="form-control"
                                       placeholder="请输入文章标题（必须）"
                                       name="title"
                                       required="required"
                                       aria-required="true"/>
                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group">

                                <textarea id="editor"
                                          type="text/plain"
                                          name="text"
                                          style="height: 450px"
                                          autocomplete="off"
                                          class="markdown-textarea"
                                >aaaaaaaaaaaaaa </textarea>

                            </div>
                            <div class="clearfix"></div>
                            <div class="form-group col-md-12" style="padding: 0;">
                                <div class="switch col-md-3">
                                    <input type="checkbox" id="allowComment" checked>
                                    <label for="allowComment">允许评论</label>
                                </div>
                                <div class="switch col-md-3">
                                    <input type="checkbox" id="allowLikes" checked>
                                    <label for="allowLikes">允许点赞</label>
                                </div>
                                <div class="switch col-md-3">
                                    <input type="checkbox" id="selfView">
                                    <label for="selfView">个人可见</label>
                                </div>
                            </div>
                            <div class="form-group col-md-12 panel">
                                <div class="panel-body">
                                    <div class="col-md-4">
                                        <select name="categoryId" id="categoryId" data-placeholder="文章分类"
                                                class="picker">
                                            <option value=""></option>
                                            <th:block th:each="category:${pageService.getCategories()}">
                                                <option th:value="${category.categorySeq}">[[${category.name}]]</option>
                                            </th:block>
                                        </select>
                                    </div>
                                    <div class="col-md-8">
                                        <input id="labels" name="labels" type="text" value="">
                                    </div>

                                </div>
                            </div>
                            <div class="form-group col-md-12 panel">
                                <div class="panel-body">
                                    <div class="col-md-6">
                                        <div class="main">
                                            <div class="upload-content">
                                                <label for="upload"><h3>上传封面</h3></label>
                                                <div class="content-img">
                                                    <ul class="content-img-list"></ul>
                                                    <div class="file">
                                                        <i class="icon icon-plus icon-3x"></i>
                                                        <input type="file"
                                                               name="file"
                                                               accept="image/*"
                                                               id="upload"
                                                               multiple>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                        <label for="summary"><h3>文章摘要</h3></label>
                                        <textarea id="summary" placeholder="文章摘要"
                                                  style="width: 100%;min-height: 150px"></textarea>
                                    </div>

                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="btns" style="margin-top:20px;">
    <div>
        <button onclick="getAllHtml()">获得整个html的内容</button>
        <button onclick="getContent()">获得内容</button>
        <button onclick="setContent()">写入内容</button>
        <button onclick="setContent(true)">追加内容</button>
        <button onclick="getContentTxt()">获得纯文本</button>
        <button onclick="getPlainTxt()">获得带格式的纯文本</button>
        <button onclick="hasContent()">判断是否有内容</button>
        <button onclick="setFocus()">使编辑器获得焦点</button>
        <button onmousedown="isFocus(event)">编辑器是否获得焦点</button>
        <button onmousedown="setblur(event)">编辑器失去焦点</button>
        <button onclick="getText()">获得当前选中的文本</button>
        <button onclick="insertHtml()">插入给定的内容</button>
        <button id="enable" onclick="setEnabled()">可以编辑</button>
        <button onclick="setDisabled()">不可编辑</button>
        <button onclick=" UE.getEditor('editor').setHide()">隐藏编辑器</button>
        <button onclick=" UE.getEditor('editor').setShow()">显示编辑器</button>
        <button onclick=" UE.getEditor('editor').setHeight(300)">设置高度为300默认关闭了自动长高</button>
        <button onclick="getLocalData()">获取草稿箱内容</button>
        <button onclick="clearLocalData()">清空草稿箱</button>
        <button onclick="createEditor()">
            创建编辑器
        </button>
        <button onclick="deleteEditor()">
            删除编辑器
        </button>
    </div>
</div>

<div class="text-center bg-white" style="position: sticky;bottom: 10px;width: 100%;height: 10%">
    <a class="btn btn-default waves-effect waves-light" th:href="'/'">返回主页</a>
    <button type="button"
            class="btn btn-primary waves-effect waves-light"
            onclick="subArticle('publish');">
        保存文章
    </button>
    <button type="button"
            class="btn btn-warning waves-effect waves-light"
            onclick="subArticle('draft');">
        存为草稿
    </button>
</div>
<script th:src="@{/plugins/zui/1.10.0/lib/jquery/jquery.js}"></script>
<script th:src="@{/plugins/zui/1.10.0/js/zui.min.js}"></script>
<script th:src="@{/plugins/zui/1.10.0/lib/picker/zui.picker.min.js}"></script>
<script th:src="@{/plugins/uploader/uploader.min.js}"></script>
<script th:src="@{/plugins/uploader/uploadImg.js}"></script>
<script th:src="@{/admin/plugins/md/js/jquery.scrollto.js}"></script>
<script th:src="@{/admin/js/base.js}"></script>
<script th:src="@{/admin/plugins/jquery-ui/jquery-ui.min.js}"></script>
<script th:src="@{/admin/plugins/jquery-tagsinput/jquery-tagsinput.js}"></script>
<script th:src="@{/plugins/request/axios.min.js}"></script>
<script th:src="@{/plugins/request/request.js}"></script>
<script>
    $('#categoryId').picker();
    $('#labels').tagsInput({
        'autocomplete': {
            'source': [
                "java",
                "Ai"
            ]
        },
        placeholder: "添加标签",
        limit: 5,
        minChars: 2,
        maxChars: 15,
    });


</script>
<script type="text/javascript">

    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    function isFocus(e) {
        alert(UE.getEditor('editor').isFocus());
        UE.dom.domUtils.preventDefault(e)
    }

    function setblur(e) {
        UE.getEditor('editor').blur();
        UE.dom.domUtils.preventDefault(e)
    }

    function insertHtml() {
        var value = prompt('插入html代码', '');
        UE.getEditor('editor').execCommand('insertHtml', value)
    }

    function createEditor() {
        enableBtn();
        UE.getEditor('editor');
    }

    function getAllHtml() {
        alert(UE.getEditor('editor').getAllHtml())
    }

    function getContent() {
        var arr = [];
        arr.push("使用editor.getContent()方法可以获得编辑器的内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getContent());
        alert(arr.join("\n"));
    }

    function getPlainTxt() {
        var arr = [];
        arr.push("使用editor.getPlainTxt()方法可以获得编辑器的带格式的纯文本内容");
        arr.push("内容为：");
        arr.push(UE.getEditor('editor').getPlainTxt());
        alert(arr.join('\n'))
    }

    function setContent(isAppendTo) {
        var arr = [];
        arr.push("使用editor.setContent('欢迎使用ueditor')方法可以设置编辑器的内容");
        UE.getEditor('editor').setContent('欢迎使用ueditor', isAppendTo);
        alert(arr.join("\n"));
    }

    function setDisabled() {
        UE.getEditor('editor').setDisabled('fullscreen');
        disableBtn("enable");
    }

    function setEnabled() {
        UE.getEditor('editor').setEnabled();
        enableBtn();
    }

    function getText() {
        //当你点击按钮时编辑区域已经失去了焦点，如果直接用getText将不会得到内容，所以要在选回来，然后取得内容
        var range = UE.getEditor('editor').selection.getRange();
        range.select();
        var txt = UE.getEditor('editor').selection.getText();
        alert(txt)
    }

    function getContentTxt() {
        var arr = [];
        arr.push("使用editor.getContentTxt()方法可以获得编辑器的纯文本内容");
        arr.push("编辑器的纯文本内容为：");
        arr.push(UE.getEditor('editor').getContentTxt());
        alert(arr.join("\n"));
    }

    function hasContent() {
        var arr = [];
        arr.push("使用editor.hasContents()方法判断编辑器里是否有内容");
        arr.push("判断结果为：");
        arr.push(UE.getEditor('editor').hasContents());
        alert(arr.join("\n"));
    }

    function setFocus() {
        UE.getEditor('editor').focus();
    }

    function deleteEditor() {
        disableBtn();
        UE.getEditor('editor').destroy();
    }

    function disableBtn(str) {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            if (btn.id == str) {
                UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
            } else {
                btn.setAttribute("disabled", "true");
            }
        }
    }

    function enableBtn() {
        var div = document.getElementById('btns');
        var btns = UE.dom.domUtils.getElementsByTagName(div, "button");
        for (var i = 0, btn; btn = btns[i++];) {
            UE.dom.domUtils.removeAttributes(btn, ["disabled"]);
        }
    }

    function getLocalData() {
        alert(UE.getEditor('editor').execCommand("getlocaldata"));
    }

    function clearLocalData() {
        UE.getEditor('editor').execCommand("clearlocaldata");
        alert("已清空草稿箱")
    }
</script>
</body>
</html>
